<template>
  <div class="app-container">
    <!-- form行 -->
    <el-form :inline="true">
      <el-form-item style="float:right">
        <el-button type="primary medium" icon="el-icon-plus" @click="showMask">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <div class="tableWrap">
      <el-table v-loading="table_loading" :data="tableData" border style="width: 100%">
        <!-- id -->
        <el-table-column prop="id" label="分类编号" width="100px" align="center" />
        <!-- 排序 -->
        <el-table-column prop="sort" label="排序" width="100px" align="center" />
        <!-- 分类名称 -->
        <el-table-column prop="categoryName" label="分类名称" align="center" />
        <!-- 项目数量 -->
        <el-table-column prop="groupProjectNum" label="项目数量" align="center" />

        <!-- 达人分享展示 -->
        <el-table-column label="达人分享展示" align="center">
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.showTalentShare"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
                @change="changeTalentSwitch($event,scope.row)"
              />
            </div>
          </template>
        </el-table-column>
        <!-- 首页展示 -->
        <el-table-column label="首页展示" align="center">
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.status"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
                @change="changeSwitch($event,scope.row)"
              />
            </div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="editCate(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" @click="deleteCate(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="block" >
      <el-pagination
        background
        :page-sizes="[10,20,50,100]"
        :page-size="pageSize"
        :pager-count="11"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @current-change="change_page"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <add-category
      v-if="showAddMask"
      :is-hidden="showAddMask"
      :detail-info="detailInfo"
      :is-disabled="isDisabled"
      @checkMask="checkMask"
      @refresh="addOrUpdate"
    />
  </div>
</template>
<script>
import addCategory from '@/components/category/category_add'
import { deleteCate, getCateDownList, getCateList, updateCate } from '../../api/category'
export default {
  filters: {
    // 过滤分类状态
    setStatus(status) {
      const arr = ['否', '是']
      return arr[parseInt(status)]
    }
  },
  components: {
    addCategory
  },
  data() {
    return {
      status: '',
      showAddMask: false,
      storeLabels: [1, 2, 3],
      tableData: [],
      total: 0, // 分页总数
      pageSize: 10, // 每页显示的总数
      page: 1, // 显示第几页
      detailInfo: {}, // 分类详细信息
      isDisabled: false, // 默认允许是否编辑
      table_loading: true,
      queryType: 0,//查询类型-后台
    }
  },
  mounted() {
    // 获取项目分类列表
    this.getCateLists()
  },
  methods: {
    // 显示隐藏 添加或编辑弹窗
    showMask() {
      this.showAddMask = true
      this.isDisabled = false
      this.detailInfo = {}
    },
    // 向子组件传递
    checkMask(isHidden) {
      this.detailInfo = {}
      this.showAddMask = isHidden
    },

    change_page(page) {
      this.getCateLists({
        'pageSize': this.pageSize,
        'pageNum': page,
        'queryType':this.queryType,
      })
    },

    addOrUpdate(){
      // 刷新列表
      this.getCateLists({
        pageSize: this.pageSize,
        pageNum: this.page,
        queryType:this.queryType,
      })
    },
    handleSizeChange(page) {
      this.getCateLists({
        'pageSize': page,
        'pageNum': this.page,
        queryType:this.queryType,
      })
    },
    // 获取列表
    getCateLists(options = {
      'pageNum': this.page,
      'pageSize': this.pageSize,
      queryType:this.queryType,
    }) {
      this.table_loading = true
      getCateList(options).then(res => {
        this.total = res.data.data.count
        this.pageNum = res.data.data.pageNum
        this.pageSize = res.data.data.pageSize
        this.tableData = res.data.data.list
        this.table_loading = false
      }).catch(res => {
        this.table_loading = false
        this.$message.error('网络连接错误，请稍后再试')
      })
    },
    // 删除项目分类
    deleteCate(id) {
      this.$confirm('确认删除该分类吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCate( {
          id: id
        }).then((result) => {
          let res = result.data
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getCateLists({
                pageSize: this.pageSize,
                pageNum: this.page
              }

            )
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error('服务器网络错误，请稍后重试')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 是否首页显示
    changeSwitch(status, item) {
      // 拿到id 和 和值 发请求告诉后台
      updateCate({
        id: item.id,
        status: status
      }).then(res => {
        if (res.data.code === 7104) {
          this.$message.error(res.data.msg)
        }
        this.getCateLists()
      }).catch((error) => {
        this.$message.error('网络连接错误，请稍后再试')
      })
    },
    // 是否在达人显示
    changeTalentSwitch(status, item) {
      // 拿到id 和 和值 发请求告诉后台
      updateCate({
        id: item.id,
        showTalentShare: status
      }).then(res => {
        if (res.data.code === 7104) {
          this.$message.error(res.data.msg)
        }
        this.getCateLists()
      }).catch((error) => {
        this.$message.error('网络连接错误，请稍后再试')
      })
    },
    // 查看编辑模块
    editCate(row) {
      this.detailInfo = row
      this.isDisabled = false
      this.showAddMask = true
    }
  }

}
</script>
<style scoped>
.cateNav .cataNavLeft {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.cateNav .cataNavLeft > div{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.cateNav .cataNavLeft label { line-height: 40px; display: inline-block;}
.block {
  background: #fff;
  padding: 32px 16px;
}
</style>
